<template>
	<view class="contentView">
		<view class="layOut">
			<view style="padding: 0 15rpx;">
				<view style="margin: 15rpx 0;">已选商品</view>
				<view class="selectedShop" v-for="(item,index) in detail.shopCartList">
					<image :src="$getPicture(item.shopPic)" style="width: 120rpx; height: 120rpx;"></image>
					<view style="flex: 1; display: flex;">
						<view style="width: 280rpx; padding-left: 15rpx; ">
							<view>{{item.shopName}}</view>
							<view v-if="item.flavourName"  style="font-size: 26rpx; color: #8799a3;" >{{item.flavourName}}</view>
						</view>
						<view style="flex: 1; display: flex; justify-content: space-between;">
							<view>x{{item.shopNum}}</view>
							<view>¥{{item.shopAmount}}</view>
						</view>
					</view>
				</view>

				<view style="margin: 15rpx 0; display: flex; justify-content: end;">合计：¥{{detail.orderAmount}}</view>
			</view>
		</view>
		<view class="layOut" style="margin-top: 15rpx;">
			<view style="padding: 0 15rpx;">
				<view style="margin: 15rpx 0;">桌台信息</view>
				<view class="textCard">
					<view class="cardFont">桌台号</view>
					<view class="cardFont">{{detail.tableId}}</view>
				</view>
				<view class="textCard">
					<view class="cardFont">就餐人数</view>
					<view class="cardFont">{{detail.dinerNum}}人</view>
				</view>
			</view>
		</view>
		<view class="layOut" style="margin-top: 15rpx;">
			<view style="padding: 0 15rpx;">
				<view style="margin: 15rpx 0;">其他信息</view>
				<view class="textCard">
					<view class="cardFont">下单时间</view>
					<view class="cardFont">{{detail.orderTime}}</view>
				</view>
				<view class="textCard">
					<view class="cardFont">订单编号</view>
					<view class="cardFont">{{detail.orderNumber}}</view>
				</view>
			</view>
		</view>

		<!-- 加菜与结算 -->
		<view v-if="orderStatus==0" class="addCoverFarme">
			<view style="display: flex; justify-content: center; height: 80rpx;">
				<view @click="toOrder()" class="meal"
					style="margin-left: 30rpx; background-color: #1989FA; color: #fff;">去加菜</view>
				<view style="width: 200rpx;"></view>
				<view @click="toPay()" class="meal" style="margin-right: 30rpx; background-color: coral; color: #fff;">
					去买单</view>
			</view>
		</view>

	</view>
</template>

<script>
	import common from "../../common/common.js"
	export default {
		data() {
			return {
				detail: {},
				tableId: 0,
				orderStatus: 0
			}
		},
		onLoad(option) {
			try {
				const decodedData = decodeURIComponent(option.data); //传递的对象参数进行解码
				this.detail = JSON.parse(decodedData);
				this.orderStatus = option.status;
				this.tableId = detail.tableId;
			} catch (error) {
				console.error("解析参数时出错", error);
			}
		},
		methods: {
			toOrder() {
				uni.navigateTo({
					url: '/pages/index/index?tableNum=' + this.tableId
				})
			},
			toPay() {
				common.post({
					url: '/orderEat/orderInfo/toPay',
					formData: {
						orderId: this.detail.orderId
					},
					success: (res) => {
						uni.showToast({
							title: '请到吧台付款',
							complete: () => {
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/order/orderList'
									})
								}, 1000); // 延迟1秒后跳转
							}
						});
					}
				})
			}
		}
	}
</script>

<style>
	.contentView {
		width: 100%;
		height: 100vh;
		background-color: #F5F5F5;
	}

	.layOut {
		background-color: #fff;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.selectedShop {
		display: flex;
		align-items: center;
		height: 140rpx;
		margin-bottom: 15rpx;
	}

	.textCard {
		margin: 15rpx 0;
		display: flex;
		justify-content: space-between;
	}

	.cardFont {
		font-size: 28rpx;
		color: gray;
	}

	.meal {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60rpx;
		flex: 1;
		margin-bottom: 10rpx;
		border-radius: 40rpx;
	}

	.scrollBar {
		height: 80rpx;
	}

	.addCoverFarme {
		width: 100%;
		height: 80rpx;
		font-size: 28rpx;
		margin-top: 20rpx;
	}
</style>